<template>
  <div class="detail-info-container" v-title data-title="贷款申请">
    <div class="detail-part">
      <div class="item border-bottom">
        <span class="item-name"><span class="is-must">*&nbsp;</span><span>真实姓名</span></span>
        <span class="item-value">
          <input class="item-value-input" type="text" :maxlength="10" placeholder="请填写真实姓名" v-model="detailInfo.userName"/>
        </span>
      </div>
      <div class="item border-bottom">
        <span class="item-name"><span class="is-must">*&nbsp;</span><span>身份证号</span></span>
        <span class="item-value">
          <input class="item-value-input" type="text" :maxlength="18" placeholder="请填写身份证号" v-model="detailInfo.identityCardNumber"/>
        </span>
      </div>
      <div class="item border-bottom">
        <span class="item-name"><span class="is-must">*&nbsp;</span><span>手机号码</span></span>
        <span class="item-value">
          <input class="item-value-input" type="tel" :maxlength="11" placeholder="请填写手机号码" v-model="detailInfo.phone"/>
        </span>
      </div>
      <div class="item border-bottom">
        <span class="item-name"><span class="is-must">*&nbsp;</span><span>证件地址</span></span>
        <span class="item-value">
          <div class="item-value-addr"
               @click="showRegLinkage"
               :class="detailInfo.provCityDistVal?'':'disabled-color'">{{detailInfo.provCityDistVal ? detailInfo.provCityDistVal : '请选择省市区'}}</div>
          <i class="icon" @click="showRegLinkage"></i>
          <transition name="fade">
            <linkage @getLinkage='setLinkage'
                     @cancelLinkage="cancelLinkage"
                     :areaList="areaList"
                     v-if="showLinkageReg"
                     :provinceId="detailInfo.residenceProvince"
                     :cityId="detailInfo.residenceCity"
                     :areaId="detailInfo.residenceDistrict"></linkage>
          </transition>
        </span>
      </div>
      <div class="item border-bottom">
        <span class="item-name"><span class="is-must">*&nbsp;</span><span>证件详细地址</span></span>
        <span class="item-value">
          <input class="item-value-input" type="text" :maxlength="20" placeholder="请填写详细地址" v-model="detailInfo.residenceAddress"/>
        </span>
      </div>
      <div class="item">
        <span class="item-name"><span class="is-must">*&nbsp;</span><span>婚姻状况</span></span>
        <span class="item-value" >
          <div class="item-value-addr"
               @click="showMarriedList"
               :class="detailInfo.maritalId?'':'disabled-color'">
            {{detailInfo.maritalId ? detailInfo.maritalIdVal : '请选择婚姻状况'}}
          </div>
          <i class="icon" @click="showMarriedList"></i>
          <mt-popup v-model="marriedPopupVisible" position="bottom" class="mint-popup">
          <mt-picker :slots="marriedSlotList"
                     value-key="value"
                     v-if="marriedPopupVisible"
                     ref="selectMarried"
                     showToolbar>
             <mt-header class="mint-header">
                <mt-button slot="right" @click="marriedConfirm" class="sure">确认</mt-button>
             </mt-header>
          </mt-picker>
          </mt-popup>
        </span>
      </div>
    </div>
    <div class="detail-part" style="margin-top: .24rem">
      <div class="item border-bottom">
        <span class="item-name"><span class="is-must">*&nbsp;</span><span>现居地址</span></span>
        <span class="item-value">
          <div class="item-value-addr"
               @click="showLivLinkage"
               :class="detailInfo.livingProvCityDistVal?'':'disabled-color'">{{detailInfo.livingProvCityDistVal ? detailInfo.livingProvCityDistVal : '请选择省市区'}}</div>
          <i class="icon" @click="showLivLinkage"></i>
          <transition name="fade">
            <linkage @getLinkage='setLinkage'
                     @cancelLinkage="cancelLinkage"
                     :areaList="areaList"
                     v-if="showLinkageLiv"
                     :provinceId="detailInfo.livingProvince"
                     :cityId="detailInfo.livingCity"
                     :areaId="detailInfo.livingDistrict"></linkage>
          </transition>
        </span>
      </div>
      <div class="item border-bottom">
        <span class="item-name"><span class="is-must">*&nbsp;</span><span>现居详细地址</span></span>
        <span class="item-value">
          <input class="item-value-input" type="text"  :maxlength="20" placeholder="请填写详细地址" v-model="detailInfo.livingAddress"/>
        </span>
      </div>
      <div class="item border-bottom">
        <span class="item-name"><span class="is-must">&nbsp;&nbsp;</span><span>单位名称</span></span>
        <span class="item-value">
          <input class="item-value-input" type="text" :maxlength="20" placeholder="请填写单位名称" v-model="detailInfo.companyName"/>
        </span>
      </div>
      <div class="item border-bottom">
        <span class="item-name"><span class="is-must">&nbsp;&nbsp;</span><span>单位地址</span></span>
        <span class="item-value">
          <input class="item-value-input" type="text" :maxlength="20" placeholder="请填写单位地址" v-model="detailInfo.companyAddress"/>
        </span>
      </div>
      <div class="item">
        <span class="item-name"><span class="is-must">*&nbsp;</span><span>每月收入</span></span>
        <span class="item-value">
          <input class="item-value-input" type="number" :maxlength="10" placeholder="请填写每月收入" v-model="detailInfo.monthlyIncome"/>
        </span>
      </div>
    </div>
    <div class="detail-part" style="margin-top: .24rem">
      <div class="item border-bottom">
        <span class="item-name"><span class="is-must">*&nbsp;</span><span>毕业院校</span></span>
        <span class="item-value">
          <input class="item-value-input" :maxlength="20" type="text" placeholder="请填写毕业院校" v-model="detailInfo.school"/>
        </span>
      </div>
      <div class="item border-bottom">
        <span class="item-name"><span class="is-must">*&nbsp;</span><span>最高学历</span></span>
        <span class="item-value" >
          <div class="item-value-addr"
               @click="showEducationList"
               :class="detailInfo.educationId?'':'disabled-color'">{{detailInfo.educationId ? detailInfo.educationIdVal : '请选择最高学历'}}</div>
          <i class="icon" @click="showEducationList"></i>
          <mt-popup lockScroll="true" v-model="educationPopupVisible" position="bottom" class="mint-popup">
          <mt-picker :slots="xlSlotList"
                     value-key="value"
                     v-if="educationPopupVisible"
                     ref="selectXl"
                     showToolbar>
             <mt-header class="mint-header">
                <mt-button slot="right" @click="educationConfirm" class="sure">确认</mt-button>
             </mt-header>
          </mt-picker>
          </mt-popup>
        </span>
      </div>
      <div class="item">
        <span class="item-name"><span class="is-must">*&nbsp;</span><span>毕业时间</span></span>
        <span class="item-value" >
          <div class="item-value-addr"
               @click="showDateList"
               :class="detailInfo.graduationTime?'':'disabled-color'"><span v-if="detailInfo.graduationTime">{{detailInfo.graduationTime|dataFormat('yyyy-MM-dd')}}</span><span v-if="!detailInfo.graduationTime">请选择毕业时间</span></div>
          <i class="icon" @click="showDateList"></i>
          <mt-datetime-picker
            lockScroll="true"
            type="date"
            ref="datePicker"
            year-format="{value} 年"
            month-format="{value} 月"
            date-format="{value} 日"
            @confirm="dateConfirm"
            :startDate="startDate"
            :endDate="endDate"
          >
        </mt-datetime-picker>
        </span>
      </div>
    </div>
    <button class="login-button" @click="submitInfo">提交信息</button>
    <success-modal ref="success"></success-modal>
    <fail-modal ref="fail"></fail-modal>
  </div>
</template>
<script>
  import SuccessModal from '@/components/success.vue'
  import FailModal from '@/components/failed.vue'
  import Linkage from './components/linkage' //引入子组件
  import{mapState,mapMutations} from 'vuex'
  import {isvalidPhone,isvalidIdCard} from '@/common/validata'
  export default{
    name: 'DetailInfo',
    computed: {
      ...mapState({
        marriedList:'marriedList',
        areaList:'areaList',
        xlList:'xlList',
        product:'product'
      }),
      marriedSlotList(){
        let dateSlots = [
          {
            flex: 1,
            values: this.marriedList,
            className: 'slot1',
            textAlign: 'center',
            defaultIndex:this.findIndex(this.marriedList,this.detailInfo.maritalId)
          }
        ]
        return dateSlots
      },
      xlSlotList(){
        let dateSlots = [
          {
            flex: 1,
            values: this.xlList,
            className: 'slot1',
            textAlign: 'center',
            defaultIndex:this.findIndex(this.xlList,this.detailInfo.educationId)
          }
        ]
        return dateSlots
      }
    },
    data(){
      return {
        handler:function(e){e.preventDefault();},
        birthday:"",  //出生日期
        startDate: new Date('1990-01-01'),
        endDate: new Date(),
        marriedPopupVisible: false,
        educationPopupVisible: false,
        detailInfo: {
          userName: '',
          companyAddress:'',
          companyName:'',
          educationId:'',
          educationIdVal:'',
          graduationTime:'',
          identityCardNumber:'',
          livingAddress:'',//详细现居地址
          livingCity:'',
          livingDistrict:'',
          livingProvince:'',
          livingProvCityDistVal:'',
          loanMoney:'',
          loanTerm:'',
          monthlyIncome: '',
          residenceAddress: '',//详细证件地址
          residenceCity: '',
          residenceDistrict: '',
          residenceProvince: '',
          provCityDistVal:'',
          school: '',
          termUnit: '',
          phone: '',
          maritalId:'',
          maritalIdVal:'',
        },
        showLinkageReg:false, //控制子组件的显示隐藏
        showLinkageLiv:false, //控制子组件的显示隐藏
      }
    },
    components: {
      Linkage,
      SuccessModal,
      FailModal
    },
    methods: {
      ...mapMutations([
        'getMarriedList',
        'getAreaInfo',
        'getXlList'
      ]),
      closeTouch () {
        document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, {passive:false})//阻止默认事件
      },
      openTouch () {
        document.getElementsByTagName('body')[0].removeEventListener('touchmove', this.handler, {passive:false})//打开默认事件
      },
      findIndex(arr,id){
          const index=this._.findIndex(arr,(o)=>{
              return o.key == id
          })
        return index>-1?index:0
      },
      showMarriedList(){
          this.marriedPopupVisible=true
      },
      showEducationList(){
        this.educationPopupVisible=true
      },
      showDateList(){
        this.$refs.datePicker.open()
      },
      marriedConfirm(){
        this.marriedPopupVisible = false
        const val = this.$refs.selectMarried.getValues()[0];
        this.detailInfo.maritalId=val.key
        this.detailInfo.maritalIdVal=val.value
      },
      educationConfirm(){
        this.educationPopupVisible=false;
        const val = this.$refs.selectXl.getValues()[0];
        this.detailInfo.educationId=val.key
        this.detailInfo.educationIdVal=val.value
      },
      dateConfirm(val){
        this.detailInfo.graduationTime=val
      },
      showLivLinkage(){
        this.showLinkageLiv=true
      },
      cancelLinkage(){
          if(this.showLinkageReg){
              this.showLinkageReg=false
          }
          if(this.showLinkageLiv){
            this.showLinkageLiv=false
          }
      },
      setLinkage(msg){ //接收子组件数据
        if(this.showLinkageReg){
          this.detailInfo.provCityDistVal = msg.label||this.detailInfo.provCityDistVal||'北京市市辖区东城区'
          this.detailInfo.residenceProvince=msg.value[0]
          this.detailInfo.residenceCity=msg.value[1]
          this.detailInfo.residenceDistrict=msg.value[2]
          this.showLinkageReg=false
        }
        if(this.showLinkageLiv){
          this.detailInfo.livingProvCityDistVal = msg.label||this.detailInfo.livingProvCityDistVal||'北京市市辖区东城区'
          this.detailInfo.livingProvince=msg.value[0]
          this.detailInfo.livingCity=msg.value[1]
          this.detailInfo.livingDistrict=msg.value[2]
          this.showLinkageLiv=false
        }

      },
      showRegLinkage(){
        this.showLinkageReg=true
      },
      submitInfoHttp(){
        const data = {
          comeFrom:this.$route.query.comeFrom || '',
          userName: this.detailInfo.userName,
          companyAddress:this.detailInfo.companyAddress,
          companyName:this.detailInfo.companyName,
          educationId:this.detailInfo.educationId,
          graduationTime:this.detailInfo.graduationTime,
          identityCardNumber:this.detailInfo.identityCardNumber,
          livingAddress:this.detailInfo.livingAddress,
          livingCity:this.detailInfo.livingCity,
          livingDistrict:this.detailInfo.livingDistrict,
          livingProvince:this.detailInfo.livingProvince,
          loanMoney:this.$route.query.loanMoney || '',
          loanTerm:this.$route.query.loanTerm || '',
          monthlyIncome:this.detailInfo.monthlyIncome,
          residenceAddress:this.detailInfo.residenceAddress,
          residenceCity:this.detailInfo.residenceCity,
          residenceDistrict:this.detailInfo.residenceDistrict,
          residenceProvince: this.detailInfo.residenceProvince,
          school: this.detailInfo.school,
          termUnit:this.$route.query.termUnit || '',
          phone:this.detailInfo.phone,
          maritalId:this.detailInfo.maritalId,
          productId:this.$route.query.productId
        }
        return new Promise((resolve, reject) => {
          this.axios({
            method:'POST',
            url:'/list/as/app/financial/api/loanApplication',
            data:data
          }).then((res)=>{
            res=res.data;
            //result==0是正常，1是异常
            if(res.code===200 && res.data.result===0){
              resolve(res.data)
            }else {
              this.$toast(res.msg)
              reject(res)
            }
          }).catch((err)=>{
            this.$toast('异常，'+err)
            reject(err)
          })
        })
      },
      //提交信息
      submitInfo(){
        if(!this.detailInfo.userName){
              this.$toast('请填写真实姓名');
              return
          }
        if(!this.detailInfo.identityCardNumber || !isvalidIdCard(this.detailInfo.identityCardNumber)){
          this.$toast('请填写正确的身份证号');
          return
        }
        if(!this.detailInfo.phone || !isvalidPhone(this.detailInfo.phone)){

          this.$toast('请填写正确的手机号码');
          return
        }
        if(!this.detailInfo.provCityDistVal){
          this.$toast('请选择证件地址');
          return
        }
        if(!this.detailInfo.residenceAddress){
          this.$toast('请填写证件详细地址');
          return
        }
        if(!this.detailInfo.maritalId){
          this.$toast('请选择婚姻状况');
          return
        }
        if(!this.detailInfo.livingProvCityDistVal){
          this.$toast('请选择现居地址');
          return
        }
        if(!this.detailInfo.livingAddress){
          this.$toast('请填写现居详细地址');
          return
        }
        if(!this.detailInfo.monthlyIncome){
          this.$toast('请填写每月收入');
          return
        }
        if(!this.detailInfo.school){
          this.$toast('请填写毕业院校');
          return
        }
        if(!this.detailInfo.educationId){
          this.$toast('请选择最高学历');
          return
        }
        if(!this.detailInfo.graduationTime){
          this.$toast('请选择毕业时间');
          return
        }
        //线上产品跳转至第三方
        this.submitInfoHttp().then((res)=>{
          if(this.product &&this.product.productType===2 && this.product.productUrl){
            window.location.href = this.product.productUrl;
            return
          }
          this.$refs.success.confirm().then(()=>{
            this.$router.push('/index')
          })
        }).catch((reject)=>{
          this.$refs.fail.confirm().then((res)=>{
            if(res==='resubmit'){
              this.submitInfo()
            }
          })
        })
      },
      //获取用户信息
      getUserInfo(){
          this.axios({
            method:'GET',
            url:'/list/as/app/financial/api/user/detail'
          }).then((res)=>{
              res=res.data;
              if(res.code === 200){
                this.detailInfo = res.data;
                this.detailInfo.livingCity=this.detailInfo.livingCity?this.detailInfo.livingCity:'110100';
                this.detailInfo.livingDistrict=this.detailInfo.livingDistrict?this.detailInfo.livingDistrict:'110101';
                this.detailInfo.livingProvince=this.detailInfo.livingProvince?this.detailInfo.livingProvince:'110000';
                this.detailInfo.residenceCity=this.detailInfo.residenceCity?this.detailInfo.residenceCity:'110100';
                this.detailInfo.residenceDistrict=this.detailInfo.residenceDistrict?this.detailInfo.residenceDistrict:'110101';
                this.detailInfo.residenceProvince=this.detailInfo.residenceProvince?this.detailInfo.residenceProvince:'110000';
              }
          })
      }
    },
    created(){
      this.getMarriedList()
      this.getAreaInfo()
      this.getXlList();
      this.getUserInfo()
    },
    watch: {
      //picker关闭没有回调函数，所以侦听该属性替代
      showLinkageReg (val){
        if(val) {
          this.closeTouch()
        } else {
          this.openTouch()
        }
      },
      showLinkageLiv (val){
        if(val) {
          this.closeTouch()
        } else {
          this.openTouch()
        }
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "~style/varibles.styl"
  input
   color #666666
  .detail-info-container >>> .picker-toolbar
    background-color $bgColor
    border-bottom 0
  .detail-info-container >>> .mint-datetime-action
    color $textButton
    font-size .28rem
  .detail-info-container >>> .picker-slot
    font-size .28rem
  .mint-header
    background-color $bgColor
    color $textButton
  .disabled-color
    color $disabledText
  input::-webkit-input-placeholder
    color: $disabledText
  .detail-info-container
    background-color $bgColor
    padding .24rem .2rem
    .detail-part
      background-color white
      border-radius .08rem
      .item
        display flex
        align-items center
        line-height 1rem
        justify-content space-between
        margin 0 .24rem
        .item-name
          color #454545
          display flex
          align-items center
          .is-must
            position relative
            top .06rem
            color $isMust
        .item-value
          background-color white
          display flex
          align-items center
          min-width 3.06rem
          justify-content space-between
          .item-value-addr
            width 100%
            font-size .25rem
          .icon
            width .3rem
            height .3rem
            display inline-block
            background url("/static/img/go-arrow.png") no-repeat
            background-size .15rem .3rem
          .mint-popup
            width 100%
    .login-button
      margin-top :.3rem
      width :100%
      height :.88rem
      border-radius :.08rem
      line-height :.88rem
      font-size :.32rem
      background :linear-gradient(to right, $gradientDeep , $gradientTint)
      color :white
</style>
